<template>
<el-card v-loading="loading">
  <template #header>
    <h2>用户管理</h2>
    <el-button type="text" @click="$router.push({name:'usersAdd'})">添加</el-button>
  </template>
  <div style="margin-bottom: 15px;">
  <el-input placeholder="请输入内容" v-model="searchValue">
    <el-select style="width:100px" v-model="searchField" slot="prepend" placeholder="请选择">
      <el-option label="用户名" value="username"></el-option>
      <el-option label="邮箱" value="email"></el-option>
      <el-option label="手机号码" value="phone"></el-option>
    </el-select>
    <el-button @click="getUsers()" slot="append" icon="el-icon-search"></el-button>
  </el-input>
</div>
  <div>
  <el-table :data="users">
      <el-table-column label="姓名" prop="username"></el-table-column>
      <el-table-column label="性别" prop="gender">
        <template #default="{row}">
          <div>{{row.gender==='0'?'女':'男'}}</div>
        </template>
      </el-table-column>
      <el-table-column label="年龄" prop="age"></el-table-column>
      <el-table-column label="邮箱" prop="email"></el-table-column>
      <el-table-column label="手机号码" prop="phone"></el-table-column>
      <el-table-column label="日期" prop="ctime"></el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <div>
            <el-button type="text" @click="delUser(row._id)">删除</el-button>
            <el-button type="text" @click="$router.push(
              {name:'usersEdit', params: {id:row._id} })">编辑</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
</div>
<!-- <p>
  <button v-for="i in Math.ceil(count/perPage)" :key="i"
  @click="toPage(i)">{{i}}</button>
</p> -->
<el-pagination style="margin-top:10px" background layout="prev, pager, next, sizes"
  :total="count" :page-size="perPage" :page-sizes="[1,2,3,4]"
   @size-change="sizeChange" @current-change="toPage">
</el-pagination>
</el-card>
</template>

<script>
import { getUsers, delUser } from '@/api/users';

export default {
  name: 'usersIndex',
  data() {
    return {
      loading: false,
      searchField: 'username',
      searchValue: '',
      count: 0,
      page: 1,
      perPage: 3,
      users: [],
    };
  },
  created() {
    this.getUsers();
  },
  methods: {
    sizeChange(num) {
      this.page = 1;
      this.perPage = num;
      this.getUsers();
    },
    toPage(i) {
      this.page = i;
      this.getUsers();
    },
    async delUser(id) {
      try {
        await this.$confirm('确定删除吗?');
        this.loading = true;
        await delUser(id);
        this.$message.success('删除成功！');
        this.getUsers();
      } catch (error) {
        this.loading = false;
      }
    },
    async getUsers() {
      this.loading = true;
      const where = {};
      if (this.searchField && this.searchValue) {
        where.searchField = this.searchField;
        where.searchValue = this.searchValue;
      }
      try {
        const { data } = await getUsers({
          page: this.page,
          perPage: this.perPage,
          ...where,
        });
        this.users = data.result;
        this.count = data.count;
        this.loading = false;
      } catch (error) {
        this.loading = false;
      }
    },
  },
};
</script>
